<template>
  <div>
    <h1>App</h1>
    info.age: {{ info.age }}
    <button @click="info.age++">info.age++</button>
    <hr>
    age: {{ age }}
    <button @click="age++">age++</button>

  </div>
</template>
<script setup>
import { reactive, ref, shallowReactive, shallowRef, toRef, toRefs } from 'vue';

const info = shallowReactive({
  name: 'jack',
  age: 20,
  size: {
    w: 100,
    h: 200
  }
});

// age = ref('20')
const age = toRef(info, 'age')
console.log(age.value);

const user = toRefs(info);
console.log(user.age.value);
console.log(user.size.value);

// user = {
//   age: ref(age),
//   name:ref(name)
// }





</script>
